<template>
    <button @click="addOne" :style="{backgroundColor: color}">
        <slot>
            加1
        </slot>
    </button>
    {{ count }}
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    initCount: {type: Number, default: 0},
    color: { type: String, default: 'rgb(60, 136, 250)'}
}
);
const count = ref(props.initCount);

function addOne() {
    count.value++;
}
</script>

<style lang="scss" scoped>
$primary-color: rgb(60, 136, 250);
button {
    background-color: $primary-color;
    border: 0;
    outline: 0;
    color: white;
    border-radius: 5px;
    padding: 5px 8px;
}
</style>